<template>
    <!-- 拷贝功能组件，点击按钮拷贝传入数据-->
    <div id="meCopy">
      <button :id="btnId" class="copy_btn" :data-clipboard-text="message" @click="copy">{{text||"拷贝"}}</button>
      <modal-box class="selfModal" ref="modal"></modal-box>
    </div>
</template>
<script>
import Clipboard from "clipboard";
import modalBox from "./modalBox";
export default {
  data() {
    return {};
  },
  components: {
    modalBox
  },
  /**拷贝功能组件，点击按钮拷贝传入数据
   * @argument btnId   创建的拷贝按钮id
   * @argument message 需要拷贝的信息
   * @argument text    按钮内容
   */
  props: ["btnId", "message", "text"],
  methods: {
    copy() {
      let clipboard = new Clipboard("#" + this.btnId);
      clipboard.on("success", e => {
        this.$refs.modal.opens("alert", "链接复制成功", this.message);
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        // 不支持复制
        this.$refs.modal.opens(
          "alert",
          "河北家乡棋牌",
          "该浏览器不支持自动复制"
        );
        // 释放内存
        clipboard.destroy();
      });
    }
  }
};
</script>
<style scoped>
.copy_btn {
  position: relative;
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  line-height: 2.33333333;
  border-radius: 5px;
  overflow: hidden;
  background-color: #1aad19;
}

.copy_btn:after {
  content: " ";
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  box-sizing: border-box;
  border-radius: 10px;
}
.copy_btn:active {
    color: rgba(255, 255, 255, 0.6);
    background-color: #179B16;
}
</style>